.host {
  white-space: normal;
}

.content {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 9px 10px;
  padding-inline: 12px;
  color: var(--vkui--color_text_primary);
  background-color: var(--vkui--color_background_contrast_themed);
  border-radius: var(--vkui--size_border_radius--regular);
  box-shadow: var(--vkui--elevation3);
}

.closeButton {
  flex-grow: 0;
  flex-shrink: 0;
  align-self: flex-start;
  padding: 0;
  margin-inline-start: 10px;
  color: inherit;
  background: none;
  border: 0;
}

.title,
.description {
  word-break: break-word;
}

.arrow {
  color: var(--vkui--color_background_contrast_themed);
}

.appearanceAccent .content {
  color: var(--vkui--color_text_contrast);
  background-color: var(--vkui--color_background_accent_tint);
}

.appearanceAccent .arrow {
  color: var(--vkui--color_background_accent_tint);
}

.appearanceWhite .content {
  color: var(--vkui--color_text_primary_invariably);
  background-color: var(--vkui--color_background_contrast);
}

.appearanceWhite .arrow {
  color: var(--vkui--color_background_contrast);
}

.appearanceBlack .content {
  color: var(--vkui--color_text_contrast);
  background-color: var(--vkui--color_background_contrast_inverse);
}

.appearanceBlack .arrow {
  color: var(--vkui--color_background_contrast_inverse);
}

.appearanceInversion .content {
  color: var(--vkui--color_text_contrast_themed);
  background-color: var(--vkui--color_background_modal_inverse);
}

.appearanceInversion .arrow {
  color: var(--vkui--color_background_modal_inverse);
}
